<template>
  <view class="modal-popup" :class="{ 'show': show }" @tap="handleMaskClick">
    <view class="modal-content" @tap.stop>
      <view class="modal-header" v-if="title">
        <view class="modal-title">{{ title }}</view>
        <view class="modal-close" @tap="close" v-if="showClose">
          <text class="iconfont icon-close"></text>
        </view>
      </view>
      
      <view class="modal-body">
        <slot></slot>
      </view>
      
      <view class="modal-footer" v-if="showFooter">
        <button 
          class="modal-btn cancel-btn" 
          @tap="cancel"
          v-if="showCancel"
        >
          {{ cancelText }}
        </button>
        <button 
          class="modal-btn confirm-btn" 
          @tap="confirm"
          v-if="showConfirm"
        >
          {{ confirmText }}
        </button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'ModalPopup',
  props: {
    show: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: ''
    },
    showClose: {
      type: Boolean,
      default: true
    },
    showFooter: {
      type: Boolean,
      default: false
    },
    showCancel: {
      type: Boolean,
      default: true
    },
    showConfirm: {
      type: Boolean,
      default: true
    },
    cancelText: {
      type: String,
      default: '取消'
    },
    confirmText: {
      type: String,
      default: '确定'
    },
    maskClosable: {
      type: Boolean,
      default: true
    }
  },
  methods: {
    close() {
      this.$emit('close')
    },
    cancel() {
      this.$emit('cancel')
      this.close()
    },
    confirm() {
      this.$emit('confirm')
    },
    handleMaskClick() {
      if (this.maskClosable) {
        this.close()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/uni.scss';

.modal-popup {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: $overlay-mask-color;
  @include flex-center;
  z-index: $z-index-modal;
  opacity: 0;
  visibility: hidden;
  transition: opacity $transition-standard, visibility $transition-standard;
  
  &.show {
    opacity: 1;
    visibility: visible;
    
    .modal-content {
      transform: scale(1);
    }
  }
}

.modal-content {
  @include card(24rpx, $shadow-overlay);
  margin: 64rpx;
  max-height: 80vh;
  overflow: hidden;
  transform: scale(0.96);
  transition: transform $transition-standard;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 32rpx;
  border-bottom: 2rpx solid $neutral-100;
}

.modal-title {
  font-size: 32rpx;
  font-weight: 500;
  color: $neutral-800;
}

.modal-close {
  padding: 8rpx;
  color: $neutral-500;
  
  .iconfont {
    font-size: 32rpx;
  }
}

.modal-body {
  padding: 32rpx;
  max-height: 60vh;
  overflow-y: auto;
}

.modal-footer {
  display: flex;
  border-top: 2rpx solid $neutral-100;
}

.modal-btn {
  flex: 1;
  padding: 32rpx;
  border: none;
  font-size: 28rpx;
  transition: background $transition-fast, transform $transition-fast;
  
  &.cancel-btn {
    background: $neutral-100;
    color: $neutral-600;
    &:active { transform: scale(0.98); }
  }
  
  &.confirm-btn {
    background: $uni-color-primary;
    color: $uni-text-color-inverse;
    &:active { transform: scale(0.98); }
  }
}
</style>